<template>
  <el-dialog
    title="添加焦点话题"
    :visible.sync="toastShow"
    width="50%"
    @open="getList()"
  >
    <tab-list
      ref="list2"
      :searchs="searchs2"
      :list-hedar="listHedar2"
      :params="params"
      :api-function="apiFunction"
      @init-params="initParams"
    >
      <el-radio slot="topicId" v-model="radio" slot-scope="scope" :label="scope.value.topicId">
        <span />
      </el-radio>
    </tab-list>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="addHotTopic()">确 定</el-button>
      <el-button @click="toastShow = false">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
// 组件
import tabList from '@/components/admin/tab-list.vue'
// 接口
import { focusTopicUse } from '@/api/operate.js'
// 页面配置
import { searchs2, listHedar2 } from '../config/focusTopic.config.js'
export default {
  components: {
    tabList
  },
  data() {
    return {
      toastShow: false,
      searchs2,
      listHedar2,
      params: {},
      apiFunction: focusTopicUse,
      radio: ''
    }
  },
  methods: {
    addHotTopic() {
      if (this.radio === '') return this.$message.error('请选择话题')
      const _params = {}
      for (let i = 0; i < this.$refs.list2.list.length; i++) {
        const item = this.$refs.list2.list[i]
        if (item.topicId === this.radio) {
          _params.topicId = item.topicId
          break
        }
      }
      this.$emit('add', _params)
    },
    getList() {
      this.params = {}
      this.searchs2.forEach(item => {
        item.value = ''
      })
      this.$refs.list2 && this.$refs.list2.getList()
    },
    setToastShow(boolean) {
      this.toastShow = boolean
    },
    initParams(param) {
      this.params = param
    }
  }
}
</script>

<style lang="scss" scoped>
  ::v-deep .search-box{
    padding: 0;
  }
  ::v-deep .table-box{
    padding: 0;
  }
  ::v-deep .el-dialog{
    max-height: 80%;
    overflow: auto;
  }
</style>
